<template>
  <view class="home-recommend">
    <template v-for="item in recommends" :key="item.acm">
      <view class="recommend-item">
        <image class="image" :src="item.image" mode="widthFix"></image>
        <view class="title">{{ item.title }}</view>
      </view>
    </template>
  </view>
</template>

<script setup>
  defineProps({
    recommends: {
      type: Array,
      default: () => []
    }
  })
  
</script>

<style lang="less">
  .home-recommend {
    display: flex;
    justify-content: space-between;
    
    padding: 20rpx;
    .recommend-item {
      .image {
        width: 150rpx;
        height: 150rpx;
      }
      
      .title {
        text-align: center;
        color: #666;
        font-size: 20rpx;
      }
    }
  }
</style>